async function func() {
    const tbody = document.querySelector("tbody")
    async function render() {
        const res = await axios({
            url: '/students',
        })
        console.log(res);
        tbody.innerHTML = res.data.map(e => {
            return `
          <tr>
          <td>${e.name}</td>
          <td>${e.age}</td>
          <td>${e.gender === 0 ? '男' : '女'}</td>
          <td>第${e.group}组</td>
          <td>${e.hope_salary}</td>
          <td>${e.salary}</td>
          <td>${e.province}</td>
          <td>
            <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${e.id}></i></a>
            <a href="javascript:;" class="text-danger" ><i class="bi bi-trash" data-id=${e.id}></i></a>
          </td>
        </tr>
          `
        }).join("")
        document.querySelector(".total").innerHTML = res.data.length
    }
    render()
    const addmodal = new bootstrap.Modal(document.querySelector("#modal"))
    let flag = true//默认功能为新增用户
    let targetId
    tbody.addEventListener("click", async e => {
        //删除用户
        if (e.target.classList.contains("bi-trash")) {
            await axios({
                url: `/students/${e.target.dataset.id}`,
                method: "delete",
            })
            render()
        }
        //修改用户
        if(e.target.classList.contains("bi-pen")){
            addmodal.show()
            const res = await axios({
                url:`/students/${e.target.dataset.id}`,
            })
            console.log(res);
            const gender = res.data.gender;
            ['name','age','gender','hope_salary','salary','group','province'].forEach(e=>{
                document.querySelector(`[name=${e}]`).value=res.data[e]
            })
            await renderCity(res.data.province)
            await renderArea(res.data.city)
            if(gender===0){
                document.querySelector("#cb01").click()
            }else{
                document.querySelector("#cb02").click()
            }
            flag = false
            targetId = e.target.dataset.id
        }
    })
    //-----新增用户&&修改用户共用同一个提交按钮
    document.querySelector(".bi-plus").addEventListener("click", async e => {
        addmodal.show()
    })
    document.querySelector("#submit").addEventListener("click", async e => {
        const formdata = serialize(document.querySelector("#form"), { hash: true });
        ['age', 'gender', 'hope_salary', 'salary', 'group'].forEach(e => {
            formdata[e] = +formdata[e]
        });
        if(flag){//新增用户
            const res = await axios({
                url: '/students',
                method: "post",
                data: formdata
            })
            tip("用户新增成功")
            console.log(res);
        }else{
            const res = await axios({
                url:`/students/${targetId}`,
                method:'put',
                data:formdata
            })
            console.log(res);
            tip("用户修改成功")
            flag = true
        }
        render()
        addmodal.hide()
    })
    //封装新增或修改用户的方法
    //-----省市区联动
    const provinceSel = document.querySelector("[name='province']")
    const citySel = document.querySelector("[name='city']")
    const areSel = document.querySelector("[name='area']")
    async function renderProvince() {
        const res = await axios({
            url: '/api/province',
        })
        provinceSel.innerHTML = res.data.map(e => {
            return `
            <option value="${e}">${e}</option>
            `
        }).join("")
    }
    async function renderCity(province) {
        province && (provinceSel.value = province)
        const res = await axios({
            url: '/api/city',
            params: {
                pname: provinceSel.value
            }
        })
        citySel.innerHTML = res.data.map(e => {
            return `
            <option value="${e}">${e}</option>
            `
        }).join("")
    }
    async function renderArea(city) {
        city && (citySel.value = city)
        const res = await axios({
            url: '/api/area',
            params: {
                pname: provinceSel.value,
                cname: citySel.value
            }
        })
        areSel.innerHTML = res.data.map(e => {
            return `
            <option value="${e}">${e}</option>
            `
        }).join("")
    }
    await renderProvince()
    await renderCity()
    await renderArea()
    provinceSel.addEventListener("change", async e => {
        await renderCity(e.target.value)
        await renderArea(citySel.value)
    })
    citySel.addEventListener("change", async e => {
        await renderArea(e.target.value)
    })
}
func()